<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态数字时钟</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#6366f1',
                        secondary: '#a5b4fc',
                        accent: '#8b5cf6',
                        dark: '#111827',
                        light: '#f9fafb'
                    },
                    fontFamily: {
                        digital: ['Segoe UI', 'Roboto', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 0 2px 10px rgba(99, 102, 241, 0.3);
            }
            .clock-glow {
                box-shadow: 0 0 30px rgba(99, 102, 241, 0.15);
            }
            .bg-grid {
                background-image: 
                    linear-gradient(rgba(100, 116, 139, 0.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(100, 116, 139, 0.05) 1px, transparent 1px);
                background-size: 20px 20px;
            }
        }
    </style>
</head>
<body class="bg-dark bg-grid min-h-screen flex items-center justify-center p-4 font-digital text-light">
    <!-- 装饰元素 -->
    <div class="fixed inset-0 pointer-events-none overflow-hidden">
        <div class="absolute -top-40 -right-40 w-80 h-80 bg-primary/5 rounded-full blur-3xl"></div>
        <div class="absolute -bottom-20 -left-20 w-60 h-60 bg-accent/5 rounded-full blur-3xl"></div>
    </div>

    <div class="clock-container relative bg-dark/60 backdrop-blur-lg rounded-2xl p-6 md:p-10 border border-primary/10 max-w-md w-full clock-glow transition-all duration-500 hover:border-primary/20">
        <!-- 顶部装饰条 -->
        <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-primary to-accent rounded-t-2xl"></div>
        
        <!-- 日期显示区域 -->
        <div id="date" class="text-center text-[clamp(1.2rem,5vw,1.8rem)] font-medium text-secondary mb-6 text-shadow"></div>
        
        <!-- 时间显示区域 -->
        <div class="relative py-4 px-2 bg-dark/40 rounded-xl mb-2">
            <div id="time" class="text-center text-[clamp(2.8rem,15vw,4.5rem)] font-bold tracking-tight text-shadow"></div>
        </div>
        
        <!-- 星期和状态显示 -->
        <div class="flex justify-between items-center mt-6 pt-4 border-t border-white/5">
            <div id="weekday" class="text-[clamp(1rem,3vw,1.2rem)] text-secondary/80"></div>
            <div class="text-xs text-primary/60 flex items-center gap-1">
                <i class="fa fa-circle animate-pulse text-[6px]"></i>
                <span>实时更新中</span>
            </div>
        </div>
    </div>

    <script>
        // 星期几的中文名称
        const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        
        // 更新时钟显示 - 移除了跳动动画
        function updateClock() {
            const now = new Date();
            
            // 获取日期组件
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            const weekday = weekdays[now.getDay()];
            
            // 获取时间组件
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            
            // 格式化并更新显示
            document.getElementById('date').textContent = `${year}年${month}月${day}日`;
            document.getElementById('time').textContent = `${hours}:${minutes}:${seconds}`;
            document.getElementById('weekday').textContent = weekday;
        }
        
        // 初始化时钟并每秒更新一次
        updateClock();
        setInterval(updateClock, 1000);
    </script>
</body>
</html>
